import React, { useState, useEffect } from 'react';
import { NavBar, Button, Icon, List, Tag, Modal, Toast } from 'antd-mobile';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';

import * as addressApi from '../../api/address';

export default class extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            list: [],
        };
    }

    async getList() {
        const res = await addressApi.getList();
        console.log(res);
        this.setState({ list: res.data });
    }

    handleDeleteClick = (record) => {
        // console.log('record', record);
        Modal.alert('⚠️ 操作警告', '你确定要删除这条地址吗???', [
            { text: '取消' },
            {
                text: '确认',
                onPress: async () => {
                    // 调用接口，删除这条地址
                    const res = await addressApi.remove(record.id);
                    // 删除失败
                    if (res.code !== 204) {
                        Toast.fail('删除失败');
                        return;
                    }
                    // 刷新列表
                    this.getList();
                },
            },
        ]);
    };

    componentDidMount() {
        this.getList();
    }

    render() {
        return (
            <div className="address-page">
                <NavBar
                    mode="dark"
                    icon={
                        <Icon
                            type="left"
                            onClick={() => this.props.history.goBack()}
                        />
                    }
                    rightContent={[
                        <span
                            key="add"
                            onClick={() =>
                                this.props.history.push('/address/create')
                            }
                        >
                            添加地址
                        </span>,
                    ]}
                >
                    地址管理
                </NavBar>

                <List renderHeader="地址列表">
                    {this.state.list.map((item, index) => (
                        <List.Item
                            key={index}
                            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                            multipleLine
                            extra={
                                <>
                                    <FormOutlined
                                        style={{ marginRight: '20px' }}
                                    />
                                    <DeleteOutlined
                                        onClick={() =>
                                            this.handleDeleteClick(item)
                                        }
                                    />
                                </>
                            }
                        >
                            <div>{item.name}</div>
                            <List.Item.Brief>{item.address}</List.Item.Brief>
                            {item.is_default === 1 && (
                                <Tag small disabled>
                                    默认地址
                                </Tag>
                            )}
                        </List.Item>
                    ))}
                </List>
            </div>
        );
    }
}
